import React, { Component } from 'react'
import { UdPage, udConfigProvider, UdTable, IUdTableProps, IUdColumn,IUdDetailItem,UdDetail, columnRenders, http, UdModal} from '@/lib'
import { BackTop } from 'antd'
import { PaginationConfig } from 'antd/lib/table'
import apis from "@/apis/AboutQuota";
import "../../QoutaApplyFor/Apply/style.scss";
import { Route } from 'react-router';
const updateBtnAuth = "quota_employee_manager_saveOrUpdateAssessSet";
const brandCode = sessionStorage.getItem("brandCode");

class Detail extends Component<IQuotaValidityPeriodProps, IQuotaValidityPeriodState> {
  static resFieldKeys: {
    content: string,
    number: string
    numberOfElements: string
    size: string
    totalElements: string
    totalPages: string
  } = {
      content: 'content',
      number: 'number',
      numberOfElements: 'numberOfElements',
      size: 'size',
      totalElements: 'totalElements',
      totalPages: 'totalPages'
    }
  /** 滚动条容器 */
  protected pageContainer = udConfigProvider.ui.getPageContainer()
  private queryParams = {
    page: 1,
    size: 10,
  }
  constructor(props) {
    super(props)
    this.state = {
      querying: false,
      rowKey: 'id',
      pagination: { current: this.queryParams.page, pageSize: this.queryParams.size },
      tableProps: {},
      columns: [
        { title: '物料编号', key: 'prodBarcode', dataIndex: 'prodBarcode', minWidth: '120px' },
        { title: '物料名称', key: 'matName', dataIndex: 'matName', minWidth: '160px' },
        { title: '期初库存(含未到货)/件', key: 'beginningRealStock', dataIndex: 'beginningRealStock', minWidth: '120px' },
        {
          title: '期间开单/件',
          key: 'nowAog',
          dataIndex: 'nowAog',
          minWidth: '70px'
        },
        { title: '当前实物库存/件', key: 'nowRealStock', dataIndex: 'nowRealStock', minWidth: '90px' },
        { title: '当前未到货/件', key: 'onOrder', dataIndex: 'onOrder', minWidth: '80px' },
        { title: '期间动销/件', key: 'nowMove', dataIndex: 'nowMove', minWidth: '80px' },
        {
          title: '下月订单计划/件',
          key: 'nextMonthOrderNum',
          dataIndex: 'nextMonthOrderNum',
          minWidth: '90px',
        },
      ],
      detailItem: [
        {
          title: "物料分类名称",
          dataIndex: "groupName",
          col: { span: 8 },
        },
      ],
      dataSource: [],
      dataSourceDetail:[],
      qoutaTemplate: [],
      roleList:[]
    }
  }

  componentWillMount() {
    this.getQuotaList()
  }
  render() {
    var props = this.props
    let style = {width: '100%',color: '#666',background: '#fff',border: '1px #ccc dashed',margin:'5px 0',height:'30px',outline: 'none'}
    let style2 =  {width:'200px',border:'none',background: '#1890ff',height:'30px',padding:0,color:'#fff',marginLeft:'200PX',borderRadius:'10px',outline: 'none'}
    return (
      <UdPage className="list-page">
        <Route>
          <div className="page-header">
            <div className="page-heading">
              <span className="page-heading-title">动销明细</span>
            </div>
            <div className="page-heading-extr" onClick={()=>this.goBack(props)}><a>返回</a></div>
          </div>
          <UdDetail items={this.state.detailItem} dataSource={this.state.dataSourceDetail}/>
          <UdTable loading={this.state.querying} rowKey={this.state.rowKey}
            pagination={this.state.pagination} {...this.state.tableProps}
            columns={this.state.columns} dataSource={this.state.dataSource}
            onChange={this.handleTableChange}
          />
          {this.pageContainer && <BackTop target={() => this.pageContainer} visibilityHeight={100} />}
        </Route>
      </UdPage>
    )
  }
  public goBack(props){
    props.history.goBack()
  }
  public getQuotaList(){
    const brandList = JSON.parse(sessionStorage.getItem('brandList'))
    const listId = brandList.checkStockDetailIdList
    const dataSourceDetails = {...brandList}
    http.post(apis.GetCheckStock, listId).then(res=>{
      this.setState({
        dataSourceDetail:dataSourceDetails,
        dataSource: res.data
      })
    })
  }
  public handleTableChange = (pagination, filters, sorter, extra) => {
    this.queryParams.page = pagination.current
    this.queryParams.size = pagination.pageSize
  }
}
export default Detail

interface IQuotaValidityPeriodProps {
  tabs: any[]
}

interface IQuotaValidityPeriodState {
  querying: boolean
  rowKey: string | ((record: any, index: number) => string)
  pagination: PaginationConfig | false
  tableProps: IUdTableProps<any>
  columns: IUdColumn[]
  detailItem:IUdDetailItem[]
  dataSource: [],
  dataSourceDetail:any[]
  qoutaTemplate:any[],
  roleList:any[]
  // currentBrand?: string
}
